
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>5 · GitBook</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="../3/1.html" />
    
    
    <link rel="prev" href="../1/3.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                    1
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="../1/1.html">
            
                <a href="../1/1.html">
            
                    
                    2
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="../1/2.html">
            
                <a href="../1/2.html">
            
                    
                    3
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="../1/3.html">
            
                <a href="../1/3.html">
            
                    
                    4
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.5" data-path="1.html">
            
                <a href="1.html">
            
                    
                    5
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="../3/1.html">
            
                <a href="../3/1.html">
            
                    
                    6
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="../4/1.html">
            
                <a href="../4/1.html">
            
                    
                    7
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="../5/1.html">
            
                <a href="../5/1.html">
            
                    
                    8
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9" data-path="../6/1.html">
            
                <a href="../6/1.html">
            
                    
                    9
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.10" data-path="../7/1.html">
            
                <a href="../7/1.html">
            
                    
                    10
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >5</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <blockquote>
<p>&#x7B2C;01&#x9636;&#x6BB5;.&#x524D;&#x7AEF;&#x57FA;&#x7840;</p>
<h1 id="css-&#x7B2C;&#x4E8C;&#x5929;">CSS &#x7B2C;&#x4E8C;&#x5929;</h1>
</blockquote>
<p>&#x4ECA;&#x5929;&#x6211;&#x4EEC;&#x56F4;&#x7ED5;&#x4E00;&#x4E2A; &#x5BFC;&#x822A;&#x680F;&#x6848;&#x4F8B;&#x8FDB;&#x884C;&#x5B66;&#x4E60;&#x77E5;&#x8BC6;&#x70B9;&#x3002;</p>
<p>&#x4ECA;&#x65E5;&#x91CD;&#x70B9;&#xFF1A;</p>
<ul>
<li>&#x590D;&#x5408;&#x9009;&#x62E9;&#x5668;<ul>
<li>&#x540E;&#x4EE3;&#x9009;&#x62E9;&#x5668;</li>
<li>&#x5E76;&#x96C6;&#x9009;&#x62E9;&#x5668;</li>
</ul>
</li>
<li>&#x6807;&#x7B7E;&#x663E;&#x793A;&#x6A21;&#x5F0F;</li>
<li>CSS&#x80CC;&#x666F;<ul>
<li>&#x80CC;&#x666F;&#x4F4D;&#x7F6E;</li>
</ul>
</li>
<li>CSS&#x4E09;&#x5927;&#x7279;&#x6027;<ul>
<li>&#x4F18;&#x5148;&#x7EA7;</li>
</ul>
</li>
</ul>
<h1 id="1-css&#x590D;&#x5408;&#x9009;&#x62E9;&#x5668;">1. CSS&#x590D;&#x5408;&#x9009;&#x62E9;&#x5668;</h1>
<p> &#x76EE;&#x6807;</p>
<ul>
<li><p>&#x7406;&#x89E3;</p>
<ul>
<li>&#x7406;&#x89E3;css&#x590D;&#x5408;&#x9009;&#x62E9;&#x5668;&#x5206;&#x522B;&#x7684;&#x5E94;&#x7528;&#x573A;&#x666F;</li>
</ul>
</li>
<li><p>&#x5E94;&#x7528;</p>
<ul>
<li>&#x4F7F;&#x7528;&#x540E;&#x4EE3;&#x9009;&#x62E9;&#x5668;&#x7ED9;&#x5143;&#x7D20;&#x6DFB;&#x52A0;&#x6837;&#x5F0F;</li>
<li>&#x4F7F;&#x7528;&#x5E76;&#x96C6;&#x9009;&#x62E9;&#x5668;&#x7ED9;&#x5143;&#x7D20;&#x6DFB;&#x52A0;&#x6837;&#x5F0F;</li>
<li>&#x4F7F;&#x7528;&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;</li>
</ul>
</li>
</ul>
<p><strong>&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x5B66;&#x4E60;css&#x590D;&#x5408;&#x9009;&#x62E9;&#x5668;</strong></p>
<p>  CSS&#x9009;&#x62E9;&#x5668;&#x5206;&#x4E3A; &#x57FA;&#x7840;&#x9009;&#x62E9;&#x5668; &#x548C; &#x590D;&#x5408;&#x9009;&#x62E9;&#x5668; &#xFF0C;&#x4F46;&#x662F;&#x57FA;&#x7840;&#x9009;&#x62E9;&#x5668;&#x4E0D;&#x80FD;&#x6EE1;&#x8DB3;&#x6211;&#x4EEC;&#x5B9E;&#x9645;&#x5F00;&#x53D1;&#x4E2D;&#xFF0C;&#x5FEB;&#x901F;&#x9AD8;&#x6548;&#x7684;&#x9009;&#x62E9;&#x6807;&#x7B7E;&#x3002;</p>
<ul>
<li>&#x76EE;&#x7684;&#x662F;&#x4E3A;&#x4E86;&#x53EF;&#x4EE5;&#x9009;&#x62E9;&#x66F4;&#x51C6;&#x786E;&#x66F4;&#x7CBE;&#x7EC6;&#x7684;&#x76EE;&#x6807;&#x5143;&#x7D20;&#x6807;&#x7B7E;&#x3002;</li>
<li>&#x590D;&#x5408;&#x9009;&#x62E9;&#x5668;&#x662F;&#x7531;&#x4E24;&#x4E2A;&#x6216;&#x591A;&#x4E2A;&#x57FA;&#x7840;&#x9009;&#x62E9;&#x5668;&#xFF0C;&#x901A;&#x8FC7;&#x4E0D;&#x540C;&#x7684;&#x65B9;&#x5F0F;&#x7EC4;&#x5408;&#x800C;&#x6210;&#x7684;</li>
</ul>
<h2 id="11-&#x540E;&#x4EE3;&#x9009;&#x62E9;&#x5668;&#xFF08;&#x91CD;&#x70B9;&#xFF09;">1.1 &#x540E;&#x4EE3;&#x9009;&#x62E9;&#x5668;&#xFF08;&#x91CD;&#x70B9;&#xFF09;</h2>
<ul>
<li><p>&#x6982;&#x5FF5;&#xFF1A;</p>
<p>&#x540E;&#x4EE3;&#x9009;&#x62E9;&#x5668;&#x53C8;&#x79F0;&#x4E3A;&#x5305;&#x542B;&#x9009;&#x62E9;&#x5668;</p>
</li>
<li><p>&#x4F5C;&#x7528;&#xFF1A;</p>
<p>&#x7528;&#x6765;&#x9009;&#x62E9;&#x5143;&#x7D20;&#x6216;&#x5143;&#x7D20;&#x7EC4;&#x7684;<strong>&#x5B50;&#x5B59;&#x540E;&#x4EE3;</strong></p>
</li>
<li><p>&#x5176;&#x5199;&#x6CD5;&#x5C31;&#x662F;&#x628A;&#x5916;&#x5C42;&#x6807;&#x7B7E;&#x5199;&#x5728;&#x524D;&#x9762;&#xFF0C;&#x5185;&#x5C42;&#x6807;&#x7B7E;&#x5199;&#x5728;&#x540E;&#x9762;&#xFF0C;&#x4E2D;&#x95F4;&#x7528;<strong>&#x7A7A;&#x683C;</strong>&#x5206;&#x9694;&#xFF0C;&#x5148;&#x5199;&#x7236;&#x4EB2;&#x7237;&#x7237;&#xFF0C;&#x5728;&#x5199;&#x513F;&#x5B50;&#x5B59;&#x5B50;&#x3002; </p>
</li>
</ul>
<pre><code>&#x7236;&#x7EA7; &#x5B50;&#x7EA7;{&#x5C5E;&#x6027;:&#x5C5E;&#x6027;&#x503C;;&#x5C5E;&#x6027;:&#x5C5E;&#x6027;&#x503C;;}
</code></pre><ul>
<li>&#x8BED;&#x6CD5;&#xFF1A;</li>
</ul>
<pre><code>.class h3{color:red;font-size:16px;}
</code></pre><ul>
<li>&#x5F53;&#x6807;&#x7B7E;&#x53D1;&#x751F;&#x5D4C;&#x5957;&#x65F6;&#xFF0C;&#x5185;&#x5C42;&#x6807;&#x7B7E;&#x5C31;&#x6210;&#x4E3A;&#x5916;&#x5C42;&#x6807;&#x7B7E;&#x7684;&#x540E;&#x4EE3;&#x3002;</li>
<li>&#x5B50;&#x5B59;&#x540E;&#x4EE3;&#x90FD;&#x53EF;&#x4EE5;&#x8FD9;&#x4E48;&#x9009;&#x62E9;&#x3002; &#x6216;&#x8005;&#x8BF4;&#xFF0C;&#x5B83;&#x80FD;&#x9009;&#x62E9;&#x4EFB;&#x4F55;&#x5305;&#x542B;&#x5728;&#x5185; &#x7684;&#x6807;&#x7B7E;&#x3002;</li>
</ul>
<h2 id="12-&#x5B50;&#x5143;&#x7D20;&#x9009;&#x62E9;&#x5668;">1.2 &#x5B50;&#x5143;&#x7D20;&#x9009;&#x62E9;&#x5668;</h2>
<ul>
<li><p>&#x4F5C;&#x7528;&#xFF1A;</p>
<p>&#x5B50;&#x5143;&#x7D20;&#x9009;&#x62E9;&#x5668;&#x53EA;&#x80FD;&#x9009;&#x62E9;&#x4F5C;&#x4E3A;&#x67D0;&#x5143;&#x7D20;<strong>&#x5B50;&#x5143;&#x7D20;(&#x4EB2;&#x513F;&#x5B50;)</strong>&#x7684;&#x5143;&#x7D20;&#x3002;</p>
</li>
<li><p>&#x5176;&#x5199;&#x6CD5;&#x5C31;&#x662F;&#x628A;&#x7236;&#x7EA7;&#x6807;&#x7B7E;&#x5199;&#x5728;&#x524D;&#x9762;&#xFF0C;&#x5B50;&#x7EA7;&#x6807;&#x7B7E;&#x5199;&#x5728;&#x540E;&#x9762;&#xFF0C;&#x4E2D;&#x95F4;&#x8DDF;&#x4E00;&#x4E2A; <code>&gt;</code> &#x8FDB;&#x884C;&#x8FDE;&#x63A5;</p>
</li>
<li>&#x8BED;&#x6CD5;&#xFF1A;</li>
</ul>
<pre><code>.class&gt;h3{color:red;font-size:14px;}
</code></pre><p><strong>pink&#x8001;&#x5E08;&#x4E00;&#x53E5;&#x8BDD;&#x8BF4;&#x51FA;&#x4ED6;&#x4EEC;</strong></p>
<blockquote>
<p>&#x8FD9;&#x91CC;&#x7684;&#x5B50; &#x6307;&#x7684;&#x662F; &#x4EB2;&#x513F;&#x5B50;  &#x4E0D;&#x5305;&#x542B;&#x5B59;&#x5B50; &#x91CD;&#x5B59;&#x5B50;&#x4E4B;&#x7C7B;&#x3002;</p>
</blockquote>
<p>&#x767D;&#x8BDD;&#xFF1A;  </p>
<pre><code> &#x6BD4;&#x5982;&#xFF1A;  .demo &gt; h3 {color: red;}   &#x8BF4;&#x660E;  h3 &#x4E00;&#x5B9A;&#x662F;demo &#x4EB2;&#x513F;&#x5B50;&#x3002;  demo &#x5143;&#x7D20;&#x5305;&#x542B;&#x7740;h3&#x3002;
</code></pre><h2 id="13-&#x4EA4;&#x96C6;&#x9009;&#x62E9;&#x5668;">1.3 &#x4EA4;&#x96C6;&#x9009;&#x62E9;&#x5668;</h2>
<ul>
<li><p>&#x6761;&#x4EF6;</p>
<p>&#x4EA4;&#x96C6;&#x9009;&#x62E9;&#x5668;&#x7531;&#x4E24;&#x4E2A;&#x9009;&#x62E9;&#x5668;&#x6784;&#x6210;&#xFF0C;&#x627E;&#x5230;&#x7684;&#x6807;&#x7B7E;&#x5FC5;&#x987B;&#x6EE1;&#x8DB3;&#xFF1A;&#x65E2;&#x6709;&#x6807;&#x7B7E;&#x4E00;&#x7684;&#x7279;&#x70B9;&#xFF0C;&#x4E5F;&#x6709;&#x6807;&#x7B7E;&#x4E8C;&#x7684;&#x7279;&#x70B9;&#x3002;</p>
</li>
</ul>
<ul>
<li>&#x8BED;&#x6CD5;&#xFF1A;</li>
</ul>
<ul>
<li>&#x5176;&#x4E2D;&#x7B2C;&#x4E00;&#x4E2A;&#x4E3A;&#x6807;&#x7B7E;&#x9009;&#x62E9;&#x5668;&#xFF0C;&#x7B2C;&#x4E8C;&#x4E2A;&#x4E3A;class&#x9009;&#x62E9;&#x5668;&#xFF0C;&#x4E24;&#x4E2A;&#x9009;&#x62E9;&#x5668;&#x4E4B;&#x95F4;<strong>&#x4E0D;&#x80FD;&#x6709;&#x7A7A;&#x683C;</strong>&#xFF0C;&#x5982;h3.special&#x3002;</li>
</ul>
<p><strong>&#x8BB0;&#x5FC6;&#x6280;&#x5DE7;&#xFF1A;</strong></p>
<p>&#x4EA4;&#x96C6;&#x9009;&#x62E9;&#x5668; &#x662F; &#x5E76;&#x4E14;&#x7684;&#x610F;&#x601D;&#x3002;  &#x5373;...&#x53C8;...&#x7684;&#x610F;&#x601D;</p>
<pre><code>&#x6BD4;&#x5982;&#xFF1A;   p.one   &#x9009;&#x62E9;&#x7684;&#x662F;&#xFF1A; &#x7C7B;&#x540D;&#x4E3A; .one  &#x7684; &#x6BB5;&#x843D;&#x6807;&#x7B7E;&#x3002;
</code></pre><p>&#x7528;&#x7684;&#x76F8;&#x5BF9;&#x6765;&#x8BF4;&#x6BD4;&#x8F83;&#x5C11;&#xFF0C;&#x4E0D;&#x592A;&#x5EFA;&#x8BAE;&#x4F7F;&#x7528;&#x3002;</p>
<h2 id="14-&#x5E76;&#x96C6;&#x9009;&#x62E9;&#x5668;&#xFF08;&#x91CD;&#x70B9;&#xFF09;">1.4 &#x5E76;&#x96C6;&#x9009;&#x62E9;&#x5668;&#xFF08;&#x91CD;&#x70B9;&#xFF09;</h2>
<ul>
<li>&#x5E94;&#x7528;&#xFF1A;<ul>
<li>&#x5982;&#x679C;&#x67D0;&#x4E9B;&#x9009;&#x62E9;&#x5668;&#x5B9A;&#x4E49;&#x7684;&#x76F8;&#x540C;&#x6837;&#x5F0F;&#xFF0C;&#x5C31;&#x53EF;&#x4EE5;&#x5229;&#x7528;&#x5E76;&#x96C6;&#x9009;&#x62E9;&#x5668;&#xFF0C;&#x53EF;&#x4EE5;&#x8BA9;&#x4EE3;&#x7801;&#x66F4;&#x7B80;&#x6D01;&#x3002;</li>
</ul>
</li>
<li>&#x5E76;&#x96C6;&#x9009;&#x62E9;&#x5668;&#xFF08;CSS&#x9009;&#x62E9;&#x5668;&#x5206;&#x7EC4;&#xFF09;&#x662F;&#x5404;&#x4E2A;&#x9009;&#x62E9;&#x5668;&#x901A;&#x8FC7;<code>,</code>&#x8FDE;&#x63A5;&#x800C;&#x6210;&#x7684;&#xFF0C;&#x901A;&#x5E38;&#x7528;&#x4E8E;&#x96C6;&#x4F53;&#x58F0;&#x660E;&#x3002;</li>
<li>&#x8BED;&#x6CD5;&#xFF1A;</li>
</ul>
<ul>
<li><p>&#x4EFB;&#x4F55;&#x5F62;&#x5F0F;&#x7684;&#x9009;&#x62E9;&#x5668;&#xFF08;&#x5305;&#x62EC;&#x6807;&#x7B7E;&#x9009;&#x62E9;&#x5668;&#x3001;class&#x7C7B;&#x9009;&#x62E9;&#x5668;id&#x9009;&#x62E9;&#x5668;&#x7B49;&#xFF09;&#xFF0C;&#x90FD;&#x53EF;&#x4EE5;&#x4F5C;&#x4E3A;&#x5E76;&#x96C6;&#x9009;&#x62E9;&#x5668;&#x7684;&#x4E00;&#x90E8;&#x5206;&#x3002;</p>
</li>
<li><p>&#x8BB0;&#x5FC6;&#x6280;&#x5DE7;&#xFF1A;</p>
<p>&#x5E76;&#x96C6;&#x9009;&#x62E9;&#x5668;&#x901A;&#x5E38;&#x7528;&#x4E8E;&#x96C6;&#x4F53;&#x58F0;&#x660E;  &#xFF0C;&#x9017;&#x53F7;&#x9694;&#x5F00;&#x7684;&#xFF0C;&#x6240;&#x6709;&#x9009;&#x62E9;&#x5668;&#x90FD;&#x4F1A;&#x6267;&#x884C;&#x540E;&#x9762;&#x6837;&#x5F0F;&#xFF0C;&#x9017;&#x53F7;&#x53EF;&#x4EE5;&#x7406;&#x89E3;&#x4E3A; &#x548C;&#x7684;&#x610F;&#x601D;&#x3002;</p>
</li>
</ul>
<pre><code>&#x6BD4;&#x5982;  .one, p , #test {color: #F00;}  
&#x8868;&#x793A;   .one &#x548C; p  &#x548C; #test &#x8FD9;&#x4E09;&#x4E2A;&#x9009;&#x62E9;&#x5668;&#x90FD;&#x4F1A;&#x6267;&#x884C;&#x989C;&#x8272;&#x4E3A;&#x7EA2;&#x8272;&#x3002; 
&#x901A;&#x5E38;&#x7528;&#x4E8E;&#x96C6;&#x4F53;&#x58F0;&#x660E;&#x3002;
</code></pre><p>&#x4ED6;&#x548C;&#x4ED6;&#xFF0C;&#x5728;&#x4E00;&#x8D77;&#xFF0C; &#x5728;&#x4E00;&#x8D77;    &#x4E00;&#x8D77;&#x7684;&#x610F;&#x601D;</p>
<h2 id="&#x6D4B;&#x8BD5;&#x9898;">&#x6D4B;&#x8BD5;&#x9898;</h2>
<pre><code class="lang-html"> <span class="hljs-comment">&lt;!-- &#x4E3B;&#x5BFC;&#x822A;&#x680F; --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;nav&quot;</span>&gt;</span>   
  <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>&#x516C;&#x53F8;&#x9996;&#x9875;<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>&#x516C;&#x53F8;&#x7B80;&#x4ECB;<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>&#x516C;&#x53F8;&#x4EA7;&#x54C1;<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>&#x8054;&#x7CFB;&#x6211;&#x4EEC;<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-comment">&lt;!-- &#x4FA7;&#x5BFC;&#x822A;&#x680F; --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;sitenav&quot;</span>&gt;</span>    
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;site-l&quot;</span>&gt;</span>&#x5DE6;&#x4FA7;&#x4FA7;&#x5BFC;&#x822A;&#x680F;<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;site-r&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>&#x767B;&#x5F55;<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
<p>&#x5728;&#x4E0D;&#x4FEE;&#x6539;&#x4EE5;&#x4E0A;&#x7ED3;&#x6784;&#x4EE3;&#x7801;&#x7684;&#x524D;&#x63D0;&#x4E0B;&#xFF0C;&#x5B8C;&#x6210;&#x4EE5;&#x4E0B;&#x4EFB;&#x52A1;&#xFF1A;</p>
<ol>
<li>&#x94FE;&#x63A5; &#x767B;&#x5F55; &#x7684;&#x989C;&#x8272;&#x4E3A;&#x7EA2;&#x8272;</li>
<li>&#x4E3B;&#x5BFC;&#x822A;&#x680F;&#x91CC;&#x9762;&#x7684;&#x6240;&#x6709;&#x7684;&#x94FE;&#x63A5;&#x6539;&#x4E3A;&#x6A59;&#x8272;    </li>
<li>&#x4E3B;&#x5BFC;&#x822A;&#x680F;&#x548C;&#x4FA7;&#x5BFC;&#x822A;&#x680F;&#x91CC;&#x9762;&#x6587;&#x5B57;&#x90FD;&#x662F;14&#x50CF;&#x7D20;&#x5E76;&#x4E14;&#x662F;&#x5FAE;&#x8F6F;&#x96C5;&#x9ED1;&#x3002;</li>
</ol>
<h2 id="15--&#x94FE;&#x63A5;&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;&#xFF08;&#x91CD;&#x70B9;&#xFF09;">1.5  &#x94FE;&#x63A5;&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;&#xFF08;&#x91CD;&#x70B9;&#xFF09;</h2>
<p> &#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;&#xFF1A;</p>
<p> &#x4E3A;&#x4E86;&#x548C;&#x6211;&#x4EEC;&#x521A;&#x624D;&#x5B66;&#x7684;&#x7C7B;&#x9009;&#x62E9;&#x5668;&#x76F8;&#x533A;&#x522B;
&#x7C7B;&#x9009;&#x62E9;&#x5668;&#x662F;&#x4E00;&#x4E2A;&#x70B9; &#x6BD4;&#x5982; .demo {}<br>&#x800C;&#x6211;&#x4EEC;&#x7684;&#x4F2A;&#x7C7B; &#x7528; 2&#x4E2A;&#x70B9; &#x5C31;&#x662F; &#x5192;&#x53F7;  &#x6BD4;&#x5982;  :link{}    &#x4F2A;&#x5A18; </p>
<p>&#x4F5C;&#x7528;&#xFF1A;</p>
<p>&#x7528;&#x4E8E;&#x5411;&#x67D0;&#x4E9B;&#x9009;&#x62E9;&#x5668;&#x6DFB;&#x52A0;&#x7279;&#x6B8A;&#x7684;&#x6548;&#x679C;&#x3002;&#x6BD4;&#x5982;&#x7ED9;&#x94FE;&#x63A5;&#x6DFB;&#x52A0;&#x7279;&#x6B8A;&#x6548;&#x679C;&#xFF0C; &#x6BD4;&#x5982;&#x53EF;&#x4EE5;&#x9009;&#x62E9; &#x7B2C;1&#x4E2A;&#xFF0C;&#x7B2C;n&#x4E2A;&#x5143;&#x7D20;&#x3002;</p>
<p>&#x56E0;&#x4E3A;&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;&#x5F88;&#x591A;&#xFF0C;&#x6BD4;&#x5982;&#x94FE;&#x63A5;&#x4F2A;&#x7C7B;&#xFF0C;&#x7ED3;&#x6784;&#x4F2A;&#x7C7B;&#x7B49;&#x7B49;&#x3002;&#x6211;&#x4EEC;&#x8FD9;&#x91CC;&#x5148;&#x7ED9;&#x5927;&#x5BB6;&#x8BB2;&#x89E3;&#x94FE;&#x63A5;&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;&#x3002;</p>
<pre><code class="lang-css">

</code></pre>
<ul>
<li>a:link      /<em> &#x672A;&#x8BBF;&#x95EE;&#x7684;&#x94FE;&#x63A5; </em>/</li>
<li>a:visited   /<em> &#x5DF2;&#x8BBF;&#x95EE;&#x7684;&#x94FE;&#x63A5; </em>/</li>
<li>a:hover     /<em> &#x9F20;&#x6807;&#x79FB;&#x52A8;&#x5230;&#x94FE;&#x63A5;&#x4E0A; </em>/</li>
<li>a:active    /<em> &#x9009;&#x5B9A;&#x7684;&#x94FE;&#x63A5; </em>/</li>
</ul>
<p>  <strong>&#x6CE8;&#x610F;</strong></p>
<ul>
<li>&#x5199;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x4ED6;&#x4EEC;&#x7684;&#x987A;&#x5E8F;&#x5C3D;&#x91CF;&#x4E0D;&#x8981;&#x98A0;&#x5012;  &#x6309;&#x7167;  lvha &#x7684;&#x987A;&#x5E8F;&#x3002;&#x5426;&#x5219;&#x53EF;&#x80FD;&#x5F15;&#x8D77;&#x9519;&#x8BEF;&#x3002;  </li>
<li>&#x8BB0;&#x5FC6;&#x6CD5;  <ul>
<li><strong>l</strong>o<strong>v</strong>e   <strong>ha</strong>te     &#x7231;&#x4E0A;&#x4E86;&#x8BA8;&#x538C;    </li>
<li><strong>lv </strong>&#x5305;&#x5305;   &#x975E;&#x5E38; <strong>ha</strong>o   </li>
</ul>
</li>
<li>&#x56E0;&#x4E3A;&#x53EB;&#x94FE;&#x63A5;&#x4F2A;&#x7C7B;&#xFF0C;&#x6240;&#x4EE5;&#x90FD;&#x662F; &#x5229;&#x7528;&#x4EA4;&#x96C6;&#x9009;&#x62E9;&#x5668;  a:link    a:hover  </li>
<li>&#x56E0;&#x4E3A;a&#x94FE;&#x63A5;&#x6D4F;&#x89C8;&#x5668;&#x5177;&#x6709;&#x9ED8;&#x8BA4;&#x6837;&#x5F0F;&#xFF0C;&#x6240;&#x4EE5;&#x6211;&#x4EEC;&#x5B9E;&#x9645;&#x5DE5;&#x4F5C;&#x4E2D;&#x90FD;&#x9700;&#x8981;&#x7ED9;&#x94FE;&#x63A5;&#x5355;&#x72EC;&#x6307;&#x5B9A;&#x6837;&#x5F0F;&#x3002;</li>
<li>&#x5B9E;&#x9645;&#x5DE5;&#x4F5C;&#x5F00;&#x53D1;&#x4E2D;&#xFF0C;&#x6211;&#x4EEC;&#x5F88;&#x5C11;&#x5199;&#x5168;&#x56DB;&#x4E2A;&#x72B6;&#x6001;&#xFF0C;&#x4E00;&#x822C;&#x6211;&#x4EEC;&#x5199;&#x6CD5;&#x5982;&#x4E0B;&#xFF1A;</li>
</ul>
<pre><code class="lang-css"><span class="hljs-selector-tag">a</span> {   <span class="hljs-comment">/* a&#x662F;&#x6807;&#x7B7E;&#x9009;&#x62E9;&#x5668;  &#x6240;&#x6709;&#x7684;&#x94FE;&#x63A5; */</span>
            <span class="hljs-attribute">font-weight</span>: <span class="hljs-number">700</span>;
            <span class="hljs-attribute">font-size</span>: <span class="hljs-number">16px</span>;
            <span class="hljs-attribute">color</span>: gray;
}
<span class="hljs-selector-tag">a</span><span class="hljs-selector-pseudo">:hover</span> {   <span class="hljs-comment">/* :hover &#x662F;&#x94FE;&#x63A5;&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668; &#x9F20;&#x6807;&#x7ECF;&#x8FC7; */</span>
            <span class="hljs-attribute">color</span>: red; <span class="hljs-comment">/*  &#x9F20;&#x6807;&#x7ECF;&#x8FC7;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x7531;&#x539F;&#x6765;&#x7684; &#x7070;&#x8272; &#x53D8;&#x6210;&#x4E86;&#x7EA2;&#x8272; */</span>
}
</code></pre>
<h2 id="16-&#x590D;&#x5408;&#x9009;&#x62E9;&#x5668;&#x603B;&#x7ED3;">1.6 &#x590D;&#x5408;&#x9009;&#x62E9;&#x5668;&#x603B;&#x7ED3;</h2>
<table>
<thead>
<tr>
<th>&#x9009;&#x62E9;&#x5668;</th>
<th>&#x4F5C;&#x7528;</th>
<th>&#x7279;&#x5F81;</th>
<th>&#x4F7F;&#x7528;&#x60C5;&#x51B5;</th>
<th>&#x9694;&#x5F00;&#x7B26;&#x53F7;&#x53CA;&#x7528;&#x6CD5;</th>
</tr>
</thead>
<tbody>
<tr>
<td>&#x540E;&#x4EE3;&#x9009;&#x62E9;&#x5668;</td>
<td>&#x7528;&#x6765;&#x9009;&#x62E9;&#x5143;&#x7D20;&#x540E;&#x4EE3;</td>
<td>&#x662F;&#x9009;&#x62E9;&#x6240;&#x6709;&#x7684;&#x5B50;&#x5B59;&#x540E;&#x4EE3;</td>
<td>&#x8F83;&#x591A;</td>
<td>&#x7B26;&#x53F7;&#x662F;<strong>&#x7A7A;&#x683C;</strong> .nav a</td>
</tr>
<tr>
<td>&#x5B50;&#x4EE3;&#x9009;&#x62E9;&#x5668;</td>
<td>&#x9009;&#x62E9; &#x6700;&#x8FD1;&#x4E00;&#x7EA7;&#x5143;&#x7D20;</td>
<td>&#x53EA;&#x9009;&#x4EB2;&#x513F;&#x5B50;</td>
<td>&#x8F83;&#x5C11;</td>
<td>&#x7B26;&#x53F7;&#x662F;<strong>&gt;</strong>   .nav&gt;p</td>
</tr>
<tr>
<td>&#x4EA4;&#x96C6;&#x9009;&#x62E9;&#x5668;</td>
<td>&#x9009;&#x62E9;&#x4E24;&#x4E2A;&#x6807;&#x7B7E;&#x4EA4;&#x96C6;&#x7684;&#x90E8;&#x5206;</td>
<td>&#x65E2;&#x662F; &#x53C8;&#x662F;</td>
<td>&#x8F83;&#x5C11;</td>
<td><strong>&#x6CA1;&#x6709;&#x7B26;&#x53F7;</strong>  p.one</td>
</tr>
<tr>
<td>&#x5E76;&#x96C6;&#x9009;&#x62E9;&#x5668;</td>
<td>&#x9009;&#x62E9;&#x67D0;&#x4E9B;&#x76F8;&#x540C;&#x6837;&#x5F0F;&#x7684;&#x9009;&#x62E9;&#x5668;</td>
<td>&#x53EF;&#x4EE5;&#x7528;&#x4E8E;&#x96C6;&#x4F53;&#x58F0;&#x660E;</td>
<td>&#x8F83;&#x591A;</td>
<td>&#x7B26;&#x53F7;&#x662F;<strong>&#x9017;&#x53F7;</strong> .nav, .header</td>
</tr>
<tr>
<td>&#x94FE;&#x63A5;&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;</td>
<td>&#x7ED9;&#x94FE;&#x63A5;&#x66F4;&#x6539;&#x72B6;&#x6001;</td>
<td></td>
<td>&#x8F83;&#x591A;</td>
<td>&#x91CD;&#x70B9;&#x8BB0;&#x4F4F; a{} &#x548C; a:hover  &#x5B9E;&#x9645;&#x5F00;&#x53D1;&#x7684;&#x5199;&#x6CD5;</td>
</tr>
</tbody>
</table>
<h1 id="2-&#x6807;&#x7B7E;&#x663E;&#x793A;&#x6A21;&#x5F0F;&#xFF08;display&#xFF09;&#x91CD;&#x70B9;">2. &#x6807;&#x7B7E;&#x663E;&#x793A;&#x6A21;&#x5F0F;&#xFF08;display&#xFF09;&#x91CD;&#x70B9;</h1>
<p>&#x76EE;&#x6807;&#xFF1A;</p>
<ul>
<li>&#x7406;&#x89E3;<ul>
<li>&#x6807;&#x7B7E;&#x7684;&#x4E09;&#x79CD;&#x663E;&#x793A;&#x6A21;&#x5F0F;</li>
<li>&#x4E09;&#x79CD;&#x663E;&#x793A;&#x6A21;&#x5F0F;&#x7684;&#x7279;&#x70B9;&#x4EE5;&#x53CA;&#x533A;&#x522B;</li>
<li>&#x7406;&#x89E3;&#x4E09;&#x79CD;&#x663E;&#x793A;&#x6A21;&#x5F0F;&#x7684;&#x76F8;&#x4E92;&#x8F6C;&#x5316;</li>
</ul>
</li>
<li>&#x5E94;&#x7528;<ul>
<li>&#x5B9E;&#x73B0;&#x4E09;&#x79CD;&#x663E;&#x793A;&#x6A21;&#x5F0F;&#x7684;&#x76F8;&#x4E92;&#x8F6C;&#x5316;</li>
</ul>
</li>
</ul>
<h2 id="21-&#x4EC0;&#x4E48;&#x662F;&#x6807;&#x7B7E;&#x663E;&#x793A;&#x6A21;&#x5F0F;">2.1 &#x4EC0;&#x4E48;&#x662F;&#x6807;&#x7B7E;&#x663E;&#x793A;&#x6A21;&#x5F0F;</h2>
<ul>
<li><p>&#x4EC0;&#x4E48;&#x662F;&#x6807;&#x7B7E;&#x7684;&#x663E;&#x793A;&#x6A21;&#x5F0F;&#xFF1F;</p>
<p>&#x6807;&#x7B7E;&#x4EE5;&#x4EC0;&#x4E48;&#x65B9;&#x5F0F;&#x8FDB;&#x884C;&#x663E;&#x793A;&#xFF0C;&#x6BD4;&#x5982;div &#x81EA;&#x5DF1;&#x5360;&#x4E00;&#x884C;&#xFF0C; &#x6BD4;&#x5982;span &#x4E00;&#x884C;&#x53EF;&#x4EE5;&#x653E;&#x5F88;&#x591A;&#x4E2A;</p>
</li>
<li><p>&#x4F5C;&#x7528;&#xFF1A; </p>
<p>&#x6211;&#x4EEC;&#x7F51;&#x9875;&#x7684;&#x6807;&#x7B7E;&#x975E;&#x5E38;&#x591A;&#xFF0C;&#x518D;&#x4E0D;&#x540C;&#x5730;&#x65B9;&#x4F1A;&#x7528;&#x5230;&#x4E0D;&#x540C;&#x7C7B;&#x578B;&#x7684;&#x6807;&#x7B7E;&#xFF0C;&#x4EE5;&#x4FBF;&#x66F4;&#x597D;&#x7684;&#x5B8C;&#x6210;&#x6211;&#x4EEC;&#x7684;&#x7F51;&#x9875;&#x3002;</p>
</li>
<li><p>&#x6807;&#x7B7E;&#x7684;&#x7C7B;&#x578B;(&#x5206;&#x7C7B;)</p>
<p>HTML&#x6807;&#x7B7E;&#x4E00;&#x822C;&#x5206;&#x4E3A;&#x5757;&#x6807;&#x7B7E;&#x548C;&#x884C;&#x5185;&#x6807;&#x7B7E;&#x4E24;&#x79CD;&#x7C7B;&#x578B;&#xFF0C;&#x5B83;&#x4EEC;&#x4E5F;&#x79F0;&#x5757;&#x5143;&#x7D20;&#x548C;&#x884C;&#x5185;&#x5143;&#x7D20;&#x3002;</p>
</li>
</ul>
<h2 id="22-&#x5757;&#x7EA7;&#x5143;&#x7D20;block-level">2.2 &#x5757;&#x7EA7;&#x5143;&#x7D20;(block-level)</h2>
<ul>
<li>&#x4F8B;&#xFF1A;</li>
</ul>
<pre><code>&#x5E38;&#x89C1;&#x7684;&#x5757;&#x5143;&#x7D20;&#x6709;&lt;h1&gt;~&lt;h6&gt;&#x3001;&lt;p&gt;&#x3001;&lt;div&gt;&#x3001;&lt;ul&gt;&#x3001;&lt;ol&gt;&#x3001;&lt;li&gt;&#x7B49;&#xFF0C;&#x5176;&#x4E2D;&lt;div&gt;&#x6807;&#x7B7E;&#x662F;&#x6700;&#x5178;&#x578B;&#x7684;&#x5757;&#x5143;&#x7D20;&#x3002;
</code></pre><ul>
<li>&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x7684;&#x7279;&#x70B9;</li>
</ul>
<p>&#xFF08;1&#xFF09;&#x6BD4;&#x8F83;&#x9738;&#x9053;&#xFF0C;&#x81EA;&#x5DF1;&#x72EC;&#x5360;&#x4E00;&#x884C;</p>
<p>&#xFF08;2&#xFF09;&#x9AD8;&#x5EA6;&#xFF0C;&#x5BBD;&#x5EA6;&#x3001;&#x5916;&#x8FB9;&#x8DDD;&#x4EE5;&#x53CA;&#x5185;&#x8FB9;&#x8DDD;&#x90FD;&#x53EF;&#x4EE5;&#x63A7;&#x5236;&#x3002;</p>
<p>&#xFF08;3&#xFF09;&#x5BBD;&#x5EA6;&#x9ED8;&#x8BA4;&#x662F;&#x5BB9;&#x5668;&#xFF08;&#x7236;&#x7EA7;&#x5BBD;&#x5EA6;&#xFF09;&#x7684;100%</p>
<p>&#xFF08;4&#xFF09;&#x662F;&#x4E00;&#x4E2A;&#x5BB9;&#x5668;&#x53CA;&#x76D2;&#x5B50;&#xFF0C;&#x91CC;&#x9762;&#x53EF;&#x4EE5;&#x653E;&#x884C;&#x5185;&#x6216;&#x8005;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x3002;</p>
<ul>
<li>&#x6CE8;&#x610F;&#xFF1A;<ul>
<li>&#x53EA;&#x6709; &#x6587;&#x5B57;&#x624D; &#x80FD;&#x7EC4;&#x6210;&#x6BB5;&#x843D;  &#x56E0;&#x6B64; p  &#x91CC;&#x9762;&#x4E0D;&#x80FD;&#x653E;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#xFF0C;&#x7279;&#x522B;&#x662F; p &#x4E0D;&#x80FD;&#x653E;div </li>
<li>&#x540C;&#x7406;&#x8FD8;&#x6709;&#x8FD9;&#x4E9B;&#x6807;&#x7B7E;h1,h2,h3,h4,h5,h6,dt&#xFF0C;&#x4ED6;&#x4EEC;&#x90FD;&#x662F;&#x6587;&#x5B57;&#x7C7B;&#x5757;&#x7EA7;&#x6807;&#x7B7E;&#xFF0C;&#x91CC;&#x9762;&#x4E0D;&#x80FD;&#x653E;&#x5176;&#x4ED6;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x3002;</li>
</ul>
</li>
</ul>
<h2 id="23-&#x884C;&#x5185;&#x5143;&#x7D20;inline-level">2.3 &#x884C;&#x5185;&#x5143;&#x7D20;(inline-level)</h2>
<ul>
<li>&#x4F8B;&#xFF1A;</li>
</ul>
<pre><code>&#x5E38;&#x89C1;&#x7684;&#x884C;&#x5185;&#x5143;&#x7D20;&#x6709;&lt;a&gt;&#x3001;&lt;strong&gt;&#x3001;&lt;b&gt;&#x3001;&lt;em&gt;&#x3001;&lt;i&gt;&#x3001;&lt;del&gt;&#x3001;&lt;s&gt;&#x3001;&lt;ins&gt;&#x3001;&lt;u&gt;&#x3001;&lt;span&gt;&#x7B49;&#xFF0C;&#x5176;&#x4E2D;&lt;span&gt;&#x6807;&#x7B7E;&#x6700;&#x5178;&#x578B;&#x7684;&#x884C;&#x5185;&#x5143;&#x7D20;&#x3002;&#x6709;&#x7684;&#x5730;&#x65B9;&#x4E5F;&#x6210;&#x5185;&#x8054;&#x5143;&#x7D20;
</code></pre><ul>
<li>&#x884C;&#x5185;&#x5143;&#x7D20;&#x7684;&#x7279;&#x70B9;&#xFF1A;</li>
</ul>
<p>&#xFF08;1&#xFF09;&#x76F8;&#x90BB;&#x884C;&#x5185;&#x5143;&#x7D20;&#x5728;&#x4E00;&#x884C;&#x4E0A;&#xFF0C;&#x4E00;&#x884C;&#x53EF;&#x4EE5;&#x663E;&#x793A;&#x591A;&#x4E2A;&#x3002;</p>
<p>&#xFF08;2&#xFF09;&#x9AD8;&#x3001;&#x5BBD;&#x76F4;&#x63A5;&#x8BBE;&#x7F6E;&#x662F;&#x65E0;&#x6548;&#x7684;&#x3002;</p>
<p>&#xFF08;3&#xFF09;&#x9ED8;&#x8BA4;&#x5BBD;&#x5EA6;&#x5C31;&#x662F;&#x5B83;&#x672C;&#x8EAB;&#x5185;&#x5BB9;&#x7684;&#x5BBD;&#x5EA6;&#x3002;</p>
<p>&#xFF08;4&#xFF09;<strong>&#x884C;&#x5185;&#x5143;&#x7D20;&#x53EA;&#x80FD;&#x5BB9;&#x7EB3;&#x6587;&#x672C;&#x6216;&#x5219;&#x5176;&#x4ED6;&#x884C;&#x5185;&#x5143;&#x7D20;&#x3002;</strong></p>
<pre><code>&#x6CE8;&#x610F;&#xFF1A;
</code></pre><ul>
<li>&#x94FE;&#x63A5;&#x91CC;&#x9762;&#x4E0D;&#x80FD;&#x518D;&#x653E;&#x94FE;&#x63A5;&#x3002;</li>
<li>&#x7279;&#x6B8A;&#x60C5;&#x51B5;a&#x91CC;&#x9762;&#x53EF;&#x4EE5;&#x653E;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#xFF0C;&#x4F46;&#x662F;&#x7ED9;a&#x8F6C;&#x6362;&#x4E00;&#x4E0B;&#x5757;&#x7EA7;&#x6A21;&#x5F0F;&#x6700;&#x5B89;&#x5168;&#x3002;</li>
</ul>
<h2 id="24-&#x884C;&#x5185;&#x5757;&#x5143;&#x7D20;&#xFF08;inline-block&#xFF09;">2.4 &#x884C;&#x5185;&#x5757;&#x5143;&#x7D20;&#xFF08;inline-block&#xFF09;</h2>
<ul>
<li>&#x4F8B;&#xFF1A;</li>
</ul>
<pre><code>&#x5728;&#x884C;&#x5185;&#x5143;&#x7D20;&#x4E2D;&#x6709;&#x51E0;&#x4E2A;&#x7279;&#x6B8A;&#x7684;&#x6807;&#x7B7E;&#x2014;&#x2014;&lt;img /&gt;&#x3001;&lt;input /&gt;&#x3001;&lt;td&gt;&#xFF0C;&#x53EF;&#x4EE5;&#x5BF9;&#x5B83;&#x4EEC;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;&#x548C;&#x5BF9;&#x9F50;&#x5C5E;&#x6027;&#xFF0C;&#x6709;&#x4E9B;&#x8D44;&#x6599;&#x53EF;&#x80FD;&#x4F1A;&#x79F0;&#x5B83;&#x4EEC;&#x4E3A;&#x884C;&#x5185;&#x5757;&#x5143;&#x7D20;&#x3002;
</code></pre><ul>
<li><p>&#x884C;&#x5185;&#x5757;&#x5143;&#x7D20;&#x7684;&#x7279;&#x70B9;&#xFF1A;</p>
<p>&#xFF08;1&#xFF09;&#x548C;&#x76F8;&#x90BB;&#x884C;&#x5185;&#x5143;&#x7D20;&#xFF08;&#x884C;&#x5185;&#x5757;&#xFF09;&#x5728;&#x4E00;&#x884C;&#x4E0A;,&#x4F46;&#x662F;&#x4E4B;&#x95F4;&#x4F1A;&#x6709;&#x7A7A;&#x767D;&#x7F1D;&#x9699;&#x3002;&#x4E00;&#x884C;&#x53EF;&#x4EE5;&#x663E;&#x793A;&#x591A;&#x4E2A;
&#xFF08;2&#xFF09;&#x9ED8;&#x8BA4;&#x5BBD;&#x5EA6;&#x5C31;&#x662F;&#x5B83;&#x672C;&#x8EAB;&#x5185;&#x5BB9;&#x7684;&#x5BBD;&#x5EA6;&#x3002;
&#xFF08;3&#xFF09;&#x9AD8;&#x5EA6;&#xFF0C;&#x884C;&#x9AD8;&#x3001;&#x5916;&#x8FB9;&#x8DDD;&#x4EE5;&#x53CA;&#x5185;&#x8FB9;&#x8DDD;&#x90FD;&#x53EF;&#x4EE5;&#x63A7;&#x5236;&#x3002;</p>
<p>&#x200B;</p>
</li>
</ul>
<h2 id="25-&#x4E09;&#x79CD;&#x6A21;&#x5F0F;&#x603B;&#x7ED3;&#x533A;&#x522B;">2.5 &#x4E09;&#x79CD;&#x6A21;&#x5F0F;&#x603B;&#x7ED3;&#x533A;&#x522B;</h2>
<table>
<thead>
<tr>
<th>&#x5143;&#x7D20;&#x6A21;&#x5F0F;</th>
<th>&#x5143;&#x7D20;&#x6392;&#x5217;</th>
<th>&#x8BBE;&#x7F6E;&#x6837;&#x5F0F;</th>
<th>&#x9ED8;&#x8BA4;&#x5BBD;&#x5EA6;</th>
<th>&#x5305;&#x542B;</th>
</tr>
</thead>
<tbody>
<tr>
<td>&#x5757;&#x7EA7;&#x5143;&#x7D20;</td>
<td>&#x4E00;&#x884C;&#x53EA;&#x80FD;&#x653E;&#x4E00;&#x4E2A;&#x5757;&#x7EA7;&#x5143;&#x7D20;</td>
<td>&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x5BBD;&#x5EA6;&#x9AD8;&#x5EA6;</td>
<td>&#x5BB9;&#x5668;&#x7684;100%</td>
<td>&#x5BB9;&#x5668;&#x7EA7;&#x53EF;&#x4EE5;&#x5305;&#x542B;&#x4EFB;&#x4F55;&#x6807;&#x7B7E;</td>
</tr>
<tr>
<td>&#x884C;&#x5185;&#x5143;&#x7D20;</td>
<td>&#x4E00;&#x884C;&#x53EF;&#x4EE5;&#x653E;&#x591A;&#x4E2A;&#x884C;&#x5185;&#x5143;&#x7D20;</td>
<td>&#x4E0D;&#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x8BBE;&#x7F6E;&#x5BBD;&#x5EA6;&#x9AD8;&#x5EA6;</td>
<td>&#x5B83;&#x672C;&#x8EAB;&#x5185;&#x5BB9;&#x7684;&#x5BBD;&#x5EA6;</td>
<td>&#x5BB9;&#x7EB3;&#x6587;&#x672C;&#x6216;&#x5219;&#x5176;&#x4ED6;&#x884C;&#x5185;&#x5143;&#x7D20;</td>
</tr>
<tr>
<td>&#x884C;&#x5185;&#x5757;&#x5143;&#x7D20;</td>
<td>&#x4E00;&#x884C;&#x653E;&#x591A;&#x4E2A;&#x884C;&#x5185;&#x5757;&#x5143;&#x7D20;</td>
<td>&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x5BBD;&#x5EA6;&#x548C;&#x9AD8;&#x5EA6;</td>
<td>&#x5B83;&#x672C;&#x8EAB;&#x5185;&#x5BB9;&#x7684;&#x5BBD;&#x5EA6;</td>
</tr>
</tbody>
</table>
<h2 id="26-&#x6807;&#x7B7E;&#x663E;&#x793A;&#x6A21;&#x5F0F;&#x8F6C;&#x6362;-display">2.6 &#x6807;&#x7B7E;&#x663E;&#x793A;&#x6A21;&#x5F0F;&#x8F6C;&#x6362; display</h2>
<ul>
<li>&#x5757;&#x8F6C;&#x884C;&#x5185;&#xFF1A;display:inline;</li>
<li>&#x884C;&#x5185;&#x8F6C;&#x5757;&#xFF1A;display:block;</li>
<li>&#x5757;&#x3001;&#x884C;&#x5185;&#x5143;&#x7D20;&#x8F6C;&#x6362;&#x4E3A;&#x884C;&#x5185;&#x5757;&#xFF1A; display: inline-block;</li>
</ul>
<p>&#x6B64;&#x9636;&#x6BB5;&#xFF0C;&#x6211;&#x4EEC;&#x53EA;&#x9700;&#x5173;&#x5FC3;&#x8FD9;&#x4E09;&#x4E2A;&#xFF0C;&#x5176;&#x4ED6;&#x7684;&#x662F;&#x6211;&#x4EEC;&#x540E;&#x9762;&#x7684;&#x5DE5;&#x4F5C;&#x3002;</p>
<h1 id="3-&#x884C;&#x9AD8;&#x90A3;&#x4E9B;&#x4E8B;&#xFF08;line-height&#xFF09;">3. &#x884C;&#x9AD8;&#x90A3;&#x4E9B;&#x4E8B;&#xFF08;line-height&#xFF09;</h1>
<p>&#x76EE;&#x6807;</p>
<ul>
<li>&#x7406;&#x89E3;<ul>
<li>&#x80FD;&#x8BF4;&#x51FA; &#x884C;&#x9AD8;  &#x548C; &#x9AD8;&#x5EA6;  &#x4E09;&#x79CD;&#x5173;&#x7CFB;</li>
<li>&#x80FD;&#x7B80;&#x5355;&#x7406;&#x89E3;&#x4E3A;&#x4EC0;&#x4E48;&#x884C;&#x9AD8;&#x7B49;&#x4E8E;&#x9AD8;&#x5EA6;&#x5355;&#x884C;&#x6587;&#x5B57;&#x4F1A;&#x5782;&#x76F4;&#x5C45;&#x4E2D;</li>
</ul>
</li>
<li>&#x5E94;&#x7528;<ul>
<li>&#x4F7F;&#x7528;&#x884C;&#x9AD8;&#x5B9E;&#x73B0;&#x5355;&#x884C;&#x6587;&#x5B57;&#x5782;&#x76F4;&#x5C45;&#x4E2D;</li>
<li>&#x80FD;&#x4F1A;&#x6D4B;&#x91CF;&#x884C;&#x9AD8;</li>
</ul>
</li>
</ul>
<h2 id="31-&#x884C;&#x9AD8;&#x6D4B;&#x91CF;">3.1 &#x884C;&#x9AD8;&#x6D4B;&#x91CF;</h2>
<p>&#x884C;&#x9AD8;&#x7684;&#x6D4B;&#x91CF;&#x65B9;&#x6CD5;&#xFF1A;</p>
<h2 id="32-&#x5355;&#x884C;&#x6587;&#x672C;&#x5782;&#x76F4;&#x5C45;&#x4E2D;">3.2 &#x5355;&#x884C;&#x6587;&#x672C;&#x5782;&#x76F4;&#x5C45;&#x4E2D;</h2>
<p> &#x884C;&#x9AD8;&#x6211;&#x4EEC;&#x5229;&#x7528;&#x6700;&#x591A;&#x7684;&#x4E00;&#x4E2A;&#x5730;&#x65B9;&#x662F;&#xFF1A; &#x53EF;&#x4EE5;&#x8BA9;&#x5355;&#x884C;&#x6587;&#x672C;&#x5728;&#x76D2;&#x5B50;&#x4E2D;&#x5782;&#x76F4;&#x5C45;&#x4E2D;&#x5BF9;&#x9F50;&#x3002;</p>
<blockquote>
<p><strong>&#x6587;&#x5B57;&#x7684;&#x884C;&#x9AD8;&#x7B49;&#x4E8E;&#x76D2;&#x5B50;&#x7684;&#x9AD8;&#x5EA6;&#x3002;</strong></p>
</blockquote>
<p>&#x8FD9;&#x91CC;&#x60C5;&#x51B5;&#x4E9B;&#x8BB8;&#x590D;&#x6742;&#xFF0C;&#x5F00;&#x59CB;&#x5B66;&#x4E60;&#xFF0C;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x5148;&#x4ECE;&#x7B80;&#x5355;&#x5730;&#x65B9;&#x5165;&#x624B;&#x5B66;&#x4F1A;&#x3002;</p>
<p>&#x884C;&#x9AD8;   =  &#x4E0A;&#x8DDD;&#x79BB; +  &#x5185;&#x5BB9;&#x9AD8;&#x5EA6;  + &#x4E0B;&#x8DDD;&#x79BB; </p>
<p>&#x4E0A;&#x8DDD;&#x79BB;&#x548C;&#x4E0B;&#x8DDD;&#x79BB;&#x603B;&#x662F;&#x76F8;&#x7B49;&#x7684;&#xFF0C;&#x56E0;&#x6B64;&#x6587;&#x5B57;&#x770B;&#x4E0A;&#x53BB;&#x662F;&#x5782;&#x76F4;&#x5C45;&#x4E2D;&#x7684;&#x3002;</p>
<p><strong>&#x884C;&#x9AD8;&#x548C;&#x9AD8;&#x5EA6;&#x7684;&#x4E09;&#x79CD;&#x5173;&#x7CFB;</strong></p>
<ul>
<li>&#x5982;&#x679C; &#x884C;&#x9AD8; &#x7B49; &#x9AD8;&#x5EA6;  &#x6587;&#x5B57;&#x4F1A; &#x5782;&#x76F4;&#x5C45;&#x4E2D;</li>
<li>&#x5982;&#x679C;&#x884C;&#x9AD8; &#x5927;&#x4E8E; &#x9AD8;&#x5EA6;   &#x6587;&#x5B57;&#x4F1A; &#x504F;&#x4E0B; </li>
<li>&#x5982;&#x679C;&#x884C;&#x9AD8;&#x5C0F;&#x4E8E;&#x9AD8;&#x5EA6;   &#x6587;&#x5B57;&#x4F1A;  &#x504F;&#x4E0A; </li>
</ul>
<h1 id="4-css-&#x80CC;&#x666F;background">4. CSS &#x80CC;&#x666F;(background)</h1>
<p>&#x76EE;&#x6807;</p>
<ul>
<li>&#x7406;&#x89E3;<ul>
<li>&#x80CC;&#x666F;&#x7684;&#x4F5C;&#x7528;</li>
<li>css&#x80CC;&#x666F;&#x56FE;&#x7247;&#x548C;&#x63D2;&#x5165;&#x56FE;&#x7247;&#x7684;&#x533A;&#x522B;</li>
</ul>
</li>
<li>&#x5E94;&#x7528;<ul>
<li>&#x901A;&#x8FC7;css&#x80CC;&#x666F;&#x5C5E;&#x6027;&#xFF0C;&#x7ED9;&#x9875;&#x9762;&#x5143;&#x7D20;&#x6DFB;&#x52A0;&#x80CC;&#x666F;&#x6837;&#x5F0F;</li>
<li>&#x80FD;&#x8BBE;&#x7F6E;&#x4E0D;&#x540C;&#x7684;&#x80CC;&#x666F;&#x56FE;&#x7247;&#x4F4D;&#x7F6E;</li>
</ul>
</li>
</ul>
<h2 id="41-&#x80CC;&#x666F;&#x989C;&#x8272;color">4.1 &#x80CC;&#x666F;&#x989C;&#x8272;(color)</h2>
<ul>
<li><p>&#x8BED;&#x6CD5;&#xFF1A;</p>
<pre><code>background-color:&#x989C;&#x8272;&#x503C;;   &#x9ED8;&#x8BA4;&#x7684;&#x503C;&#x662F; transparent  &#x900F;&#x660E;&#x7684;
</code></pre></li>
</ul>
<h2 id="42-&#x80CC;&#x666F;&#x56FE;&#x7247;image">4.2 &#x80CC;&#x666F;&#x56FE;&#x7247;(image)</h2>
<ul>
<li>&#x8BED;&#x6CD5;&#xFF1A; </li>
</ul>
<pre><code class="lang-css">background-image : none | url (url)
</code></pre>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th style="text-align:center">&#x4F5C;&#x7528;</th>
</tr>
</thead>
<tbody>
<tr>
<td>none</td>
<td style="text-align:center">&#x65E0;&#x80CC;&#x666F;&#x56FE;&#xFF08;&#x9ED8;&#x8BA4;&#x7684;&#xFF09;</td>
</tr>
<tr>
<td>url</td>
<td style="text-align:center">&#x4F7F;&#x7528;&#x7EDD;&#x5BF9;&#x6216;&#x76F8;&#x5BF9;&#x5730;&#x5740;&#x6307;&#x5B9A;&#x80CC;&#x666F;&#x56FE;&#x50CF;</td>
</tr>
</tbody>
</table>
<pre><code class="lang-css">background-image : url(images/demo.png);
</code></pre>
<ul>
<li>&#x5C0F;&#x6280;&#x5DE7;&#xFF1A;  &#x6211;&#x4EEC;&#x63D0;&#x5021; &#x80CC;&#x666F;&#x56FE;&#x7247;&#x540E;&#x9762;&#x7684;&#x5730;&#x5740;&#xFF0C;url&#x4E0D;&#x8981;&#x52A0;&#x5F15;&#x53F7;&#x3002;</li>
</ul>
<h2 id="43-&#x80CC;&#x666F;&#x5E73;&#x94FA;&#xFF08;repeat&#xFF09;">4.3 &#x80CC;&#x666F;&#x5E73;&#x94FA;&#xFF08;repeat&#xFF09;</h2>
<ul>
<li>&#x8BED;&#x6CD5;&#xFF1A; </li>
</ul>
<pre><code class="lang-css">background-repeat : repeat | no-repeat | repeat-x | repeat-y
</code></pre>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th style="text-align:center">&#x4F5C;&#x7528;</th>
</tr>
</thead>
<tbody>
<tr>
<td>repeat</td>
<td style="text-align:center">&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x5728;&#x7EB5;&#x5411;&#x548C;&#x6A2A;&#x5411;&#x4E0A;&#x5E73;&#x94FA;&#xFF08;&#x9ED8;&#x8BA4;&#x7684;&#xFF09;</td>
</tr>
<tr>
<td>no-repeat</td>
<td style="text-align:center">&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x4E0D;&#x5E73;&#x94FA;</td>
</tr>
<tr>
<td>repeat-x</td>
<td style="text-align:center">&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x5728;&#x6A2A;&#x5411;&#x4E0A;&#x5E73;&#x94FA;</td>
</tr>
<tr>
<td>repeat-y</td>
<td style="text-align:center">&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x5728;&#x7EB5;&#x5411;&#x5E73;&#x94FA;</td>
</tr>
</tbody>
</table>
<h2 id="44-&#x80CC;&#x666F;&#x4F4D;&#x7F6E;position-&#x91CD;&#x70B9;">4.4 &#x80CC;&#x666F;&#x4F4D;&#x7F6E;(position) &#x91CD;&#x70B9;</h2>
<ul>
<li>&#x8BED;&#x6CD5;&#xFF1A; </li>
</ul>
<pre><code class="lang-css">background-position : length || length

background-position : position || position
</code></pre>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th style="text-align:center">&#x503C;</th>
</tr>
</thead>
<tbody>
<tr>
<td>length</td>
<td style="text-align:center">&#x767E;&#x5206;&#x6570; \</td>
<td>&#x7531;&#x6D6E;&#x70B9;&#x6570;&#x5B57;&#x548C;&#x5355;&#x4F4D;&#x6807;&#x8BC6;&#x7B26;&#x7EC4;&#x6210;&#x7684;&#x957F;&#x5EA6;&#x503C;</td>
</tr>
<tr>
<td>position</td>
<td style="text-align:center">top \</td>
<td>center \</td>
<td>bottom \</td>
<td>left \</td>
<td>center \</td>
<td>right   &#x65B9;&#x4F4D;&#x540D;&#x8BCD;</td>
</tr>
</tbody>
</table>
<ul>
<li>&#x6CE8;&#x610F;&#xFF1A;<ul>
<li>&#x5FC5;&#x987B;&#x5148;&#x6307;&#x5B9A;background-image&#x5C5E;&#x6027;</li>
<li>position &#x540E;&#x9762;&#x662F;x&#x5750;&#x6807;&#x548C;y&#x5750;&#x6807;&#x3002; &#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x65B9;&#x4F4D;&#x540D;&#x8BCD;&#x6216;&#x8005; &#x7CBE;&#x786E;&#x5355;&#x4F4D;&#x3002;</li>
<li>&#x5982;&#x679C;&#x6307;&#x5B9A;&#x4E24;&#x4E2A;&#x503C;&#xFF0C;&#x4E24;&#x4E2A;&#x503C;&#x90FD;&#x662F;&#x65B9;&#x4F4D;&#x540D;&#x5B57;&#xFF0C;&#x5219;&#x4E24;&#x4E2A;&#x503C;&#x524D;&#x540E;&#x987A;&#x5E8F;&#x65E0;&#x5173;&#xFF0C;&#x6BD4;&#x5982;left  top&#x548C;top  left&#x6548;&#x679C;&#x4E00;&#x81F4;</li>
<li>&#x5982;&#x679C;&#x53EA;&#x6307;&#x5B9A;&#x4E86;&#x4E00;&#x4E2A;&#x65B9;&#x4F4D;&#x540D;&#x8BCD;&#xFF0C;&#x53E6;&#x4E00;&#x4E2A;&#x503C;&#x9ED8;&#x8BA4;&#x5C45;&#x4E2D;&#x5BF9;&#x9F50;&#x3002;</li>
<li>&#x5982;&#x679C;position &#x540E;&#x9762;&#x662F;&#x7CBE;&#x786E;&#x5750;&#x6807;&#xFF0C; &#x90A3;&#x4E48;&#x7B2C;&#x4E00;&#x4E2A;&#xFF0C;&#x80AF;&#x5B9A;&#x662F; x  &#x7B2C;&#x4E8C;&#x7684;&#x4E00;&#x5B9A;&#x662F;y</li>
<li>&#x5982;&#x679C;&#x53EA;&#x6307;&#x5B9A;&#x4E00;&#x4E2A;&#x6570;&#x503C;,&#x90A3;&#x8BE5;&#x6570;&#x503C;&#x4E00;&#x5B9A;&#x662F;x&#x5750;&#x6807;&#xFF0C;&#x53E6;&#x4E00;&#x4E2A;&#x9ED8;&#x8BA4;&#x5782;&#x76F4;&#x5C45;&#x4E2D;</li>
<li>&#x5982;&#x679C;&#x6307;&#x5B9A;&#x7684;&#x4E24;&#x4E2A;&#x503C;&#x662F; &#x7CBE;&#x786E;&#x5355;&#x4F4D;&#x548C;&#x65B9;&#x4F4D;&#x540D;&#x5B57;&#x6DF7;&#x5408;&#x4F7F;&#x7528;&#xFF0C;&#x5219;&#x7B2C;&#x4E00;&#x4E2A;&#x503C;&#x662F;x&#x5750;&#x6807;&#xFF0C;&#x7B2C;&#x4E8C;&#x4E2A;&#x503C;&#x662F;y&#x5750;&#x6807;</li>
</ul>
</li>
</ul>
<p><strong>&#x5B9E;&#x9645;&#x5DE5;&#x4F5C;&#x7528;&#x7684;&#x6700;&#x591A;&#x7684;&#xFF0C;&#x5C31;&#x662F;&#x80CC;&#x666F;&#x56FE;&#x7247;&#x5C45;&#x4E2D;&#x5BF9;&#x9F50;&#x4E86;&#x3002;</strong></p>
<p>&#x7EC3;&#x4E60;1&#xFF1A;</p>
<p>&#x80CC;&#x666F;&#x5927;&#x56FE;</p>
<p>&#x7EC3;&#x4E60;2&#xFF1A;</p>
<p>&#x5C0F;&#x56FE;&#x7247;&#x5728;&#x76D2;&#x5B50;&#x5DE6;&#x4FA7;&#x5782;&#x76F4;&#x5C45;&#x4E2D;</p>
<h2 id="45-&#x80CC;&#x666F;&#x9644;&#x7740;">4.5 &#x80CC;&#x666F;&#x9644;&#x7740;</h2>
<ul>
<li><p>&#x80CC;&#x666F;&#x9644;&#x7740;&#x5C31;&#x662F;&#x89E3;&#x91CA;&#x80CC;&#x666F;&#x662F;&#x6EDA;&#x52A8;&#x7684;&#x8FD8;&#x662F;&#x56FA;&#x5B9A;&#x7684;</p>
</li>
<li><p>&#x8BED;&#x6CD5;&#xFF1A; </p>
<pre><code class="lang-&#x3011;">background-attachment : scroll | fixed
</code></pre>
</li>
</ul>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th style="text-align:center">&#x4F5C;&#x7528;</th>
</tr>
</thead>
<tbody>
<tr>
<td>scroll</td>
<td style="text-align:center">&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x662F;&#x968F;&#x5BF9;&#x8C61;&#x5185;&#x5BB9;&#x6EDA;&#x52A8;</td>
</tr>
<tr>
<td>fixed</td>
<td style="text-align:center">&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x56FA;&#x5B9A;</td>
</tr>
</tbody>
</table>
<h2 id="46-&#x80CC;&#x666F;&#x7B80;&#x5199;">4.6 &#x80CC;&#x666F;&#x7B80;&#x5199;</h2>
<ul>
<li>background&#xFF1A;&#x5C5E;&#x6027;&#x7684;&#x503C;&#x7684;&#x4E66;&#x5199;&#x987A;&#x5E8F;&#x5B98;&#x65B9;&#x5E76;&#x6CA1;&#x6709;&#x5F3A;&#x5236;&#x6807;&#x51C6;&#x7684;&#x3002;&#x4E3A;&#x4E86;&#x53EF;&#x8BFB;&#x6027;&#xFF0C;&#x5EFA;&#x8BAE;&#x5927;&#x5BB6;&#x5982;&#x4E0B;&#x5199;&#xFF1A;</li>
<li>background: &#x80CC;&#x666F;&#x989C;&#x8272; &#x80CC;&#x666F;&#x56FE;&#x7247;&#x5730;&#x5740; &#x80CC;&#x666F;&#x5E73;&#x94FA; &#x80CC;&#x666F;&#x6EDA;&#x52A8; &#x80CC;&#x666F;&#x4F4D;&#x7F6E;;</li>
<li>&#x8BED;&#x6CD5;&#xFF1A;</li>
</ul>
<pre><code class="lang-css"><span class="hljs-selector-tag">background</span>: <span class="hljs-selector-tag">transparent</span> <span class="hljs-selector-tag">url</span>(<span class="hljs-selector-tag">image</span><span class="hljs-selector-class">.jpg</span>) <span class="hljs-selector-tag">repeat-y</span>  <span class="hljs-selector-tag">scroll</span> <span class="hljs-selector-tag">center</span> <span class="hljs-selector-tag">top</span> ;
</code></pre>
<p>&#x6848;&#x4F8B;&#xFF1A;</p>
<p>&#x5BFC;&#x822A;&#x680F;&#x6848;&#x4F8B;</p>
<h2 id="47-&#x80CC;&#x666F;&#x900F;&#x660E;css3">4.7 &#x80CC;&#x666F;&#x900F;&#x660E;(CSS3)</h2>
<ul>
<li>&#x8BED;&#x6CD5;&#xFF1A;</li>
</ul>
<pre><code class="lang-css"><span class="hljs-selector-tag">background</span>: <span class="hljs-selector-tag">rgba</span>(0, 0, 0, 0<span class="hljs-selector-class">.3</span>);
</code></pre>
<ul>
<li>&#x6700;&#x540E;&#x4E00;&#x4E2A;&#x53C2;&#x6570;&#x662F;alpha &#x900F;&#x660E;&#x5EA6;  &#x53D6;&#x503C;&#x8303;&#x56F4; 0~1&#x4E4B;&#x95F4;</li>
<li>&#x6211;&#x4EEC;&#x4E60;&#x60EF;&#x628A;0.3 &#x7684; 0 &#x7701;&#x7565;&#x6389;  &#x8FD9;&#x6837;&#x5199;  background: rgba(0, 0, 0, .3);</li>
<li>&#x6CE8;&#x610F;&#xFF1A;  &#x80CC;&#x666F;&#x534A;&#x900F;&#x660E;&#x662F;&#x6307;&#x76D2;&#x5B50;&#x80CC;&#x666F;&#x534A;&#x900F;&#x660E;&#xFF0C; &#x76D2;&#x5B50;&#x91CC;&#x9762;&#x7684;&#x5185;&#x5BB9;&#x4E0D;&#x53D7;&#x5F71;&#x54CD;</li>
<li>&#x56E0;&#x4E3A;&#x662F;CSS3 &#xFF0C;&#x6240;&#x4EE5; &#x4F4E;&#x4E8E; ie9 &#x7684;&#x7248;&#x672C;&#x662F;&#x4E0D;&#x652F;&#x6301;&#x7684;&#x3002;</li>
</ul>
<h2 id="48-&#x80CC;&#x666F;&#x603B;&#x7ED3;">4.8 &#x80CC;&#x666F;&#x603B;&#x7ED3;</h2>
<table>
<thead>
<tr>
<th>&#x5C5E;&#x6027;</th>
<th style="text-align:left">&#x4F5C;&#x7528;</th>
<th style="text-align:left">&#x503C;</th>
</tr>
</thead>
<tbody>
<tr>
<td>background-color</td>
<td style="text-align:left">&#x80CC;&#x666F;&#x989C;&#x8272;</td>
<td style="text-align:left">&#x9884;&#x5B9A;&#x4E49;&#x7684;&#x989C;&#x8272;&#x503C;/&#x5341;&#x516D;&#x8FDB;&#x5236;/RGB&#x4EE3;&#x7801;</td>
</tr>
<tr>
<td>background-image</td>
<td style="text-align:left">&#x80CC;&#x666F;&#x56FE;&#x7247;</td>
<td style="text-align:left">url(&#x56FE;&#x7247;&#x8DEF;&#x5F84;)</td>
</tr>
<tr>
<td>background-repeat</td>
<td style="text-align:left">&#x662F;&#x5426;&#x5E73;&#x94FA;</td>
<td style="text-align:left">repeat/no-repeat/repeat-x/repeat-y</td>
</tr>
<tr>
<td>background-position</td>
<td style="text-align:left">&#x80CC;&#x666F;&#x4F4D;&#x7F6E;</td>
<td style="text-align:left">length/position    &#x5206;&#x522B;&#x662F;x  &#x548C; y&#x5750;&#x6807;&#xFF0C; &#x5207;&#x8BB0; &#x5982;&#x679C;&#x6709; &#x7CBE;&#x786E;&#x6570;&#x503C;&#x5355;&#x4F4D;&#xFF0C;&#x5219;&#x5FC5;&#x987B;&#x6309;&#x7167;&#x5148;X &#x540E;Y &#x7684;&#x5199;&#x6CD5;</td>
</tr>
<tr>
<td>background-attachment</td>
<td style="text-align:left">&#x80CC;&#x666F;&#x56FA;&#x5B9A;&#x8FD8;&#x662F;&#x6EDA;&#x52A8;</td>
<td style="text-align:left">scroll/fixed</td>
</tr>
<tr>
<td>&#x80CC;&#x666F;&#x7B80;&#x5199;</td>
<td style="text-align:left">&#x66F4;&#x7B80;&#x5355;</td>
<td style="text-align:left">&#x80CC;&#x666F;&#x989C;&#x8272; &#x80CC;&#x666F;&#x56FE;&#x7247;&#x5730;&#x5740; &#x80CC;&#x666F;&#x5E73;&#x94FA; &#x80CC;&#x666F;&#x6EDA;&#x52A8; &#x80CC;&#x666F;&#x4F4D;&#x7F6E;;  &#x4ED6;&#x4EEC;&#x6CA1;&#x6709;&#x987A;&#x5E8F;</td>
</tr>
<tr>
<td>&#x80CC;&#x666F;&#x900F;&#x660E;</td>
<td style="text-align:left">&#x8BA9;&#x76D2;&#x5B50;&#x534A;&#x900F;&#x660E;</td>
<td style="text-align:left">background: rgba(0,0,0,0.3);   &#x540E;&#x9762;&#x5FC5;&#x987B;&#x662F; 4&#x4E2A;&#x503C;</td>
</tr>
</tbody>
</table>
<h1 id="5-css-&#x4E09;&#x5927;&#x7279;&#x6027;">5. CSS &#x4E09;&#x5927;&#x7279;&#x6027;</h1>
<p>&#x76EE;&#x6807;&#xFF1A;</p>
<ul>
<li>&#x7406;&#x89E3;<ul>
<li>&#x80FD;&#x8BF4;&#x51FA;css&#x6837;&#x5F0F;&#x51B2;&#x7A81;&#x91C7;&#x53D6;&#x7684;&#x539F;&#x5219;</li>
<li>&#x80FD;&#x8BF4;&#x51FA;&#x90A3;&#x4E9B;&#x5E38;&#x89C1;&#x7684;&#x6837;&#x5F0F;&#x4F1A;&#x6709;&#x7EE7;&#x627F;</li>
</ul>
</li>
<li>&#x5E94;&#x7528;<ul>
<li>&#x80FD;&#x5199;&#x51FA;CSS&#x4F18;&#x5148;&#x7EA7;&#x7684;&#x7B97;&#x6CD5;</li>
<li>&#x80FD;&#x4F1A;&#x8BA1;&#x7B97;&#x5E38;&#x89C1;&#x9009;&#x62E9;&#x5668;&#x7684;&#x53E0;&#x52A0;&#x503C;</li>
</ul>
</li>
</ul>
<h2 id="51-css&#x5C42;&#x53E0;&#x6027;">5.1 CSS&#x5C42;&#x53E0;&#x6027;</h2>
<ul>
<li><p>&#x6982;&#x5FF5;&#xFF1A;</p>
<p>&#x6240;&#x8C13;&#x5C42;&#x53E0;&#x6027;&#x662F;&#x6307;&#x591A;&#x79CD;CSS&#x6837;&#x5F0F;&#x7684;&#x53E0;&#x52A0;&#x3002;</p>
<p>&#x662F;&#x6D4F;&#x89C8;&#x5668;&#x5904;&#x7406;&#x51B2;&#x7A81;&#x7684;&#x4E00;&#x4E2A;&#x80FD;&#x529B;,&#x5982;&#x679C;&#x4E00;&#x4E2A;&#x5C5E;&#x6027;&#x901A;&#x8FC7;&#x4E24;&#x4E2A;&#x76F8;&#x540C;&#x9009;&#x62E9;&#x5668;&#x8BBE;&#x7F6E;&#x5230;&#x540C;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#x4E0A;&#xFF0C;&#x90A3;&#x4E48;&#x8FD9;&#x4E2A;&#x65F6;&#x5019;&#x4E00;&#x4E2A;&#x5C5E;&#x6027;&#x5C31;&#x4F1A;&#x5C06;&#x53E6;&#x4E00;&#x4E2A;&#x5C5E;&#x6027;&#x5C42;&#x53E0;&#x6389;</p>
</li>
<li><p>&#x539F;&#x5219;&#xFF1A;</p>
<ul>
<li>&#x6837;&#x5F0F;&#x51B2;&#x7A81;&#xFF0C;&#x9075;&#x5FAA;&#x7684;&#x539F;&#x5219;&#x662F;<strong>&#x5C31;&#x8FD1;&#x539F;&#x5219;&#x3002;</strong> &#x90A3;&#x4E2A;&#x6837;&#x5F0F;&#x79BB;&#x7740;&#x7ED3;&#x6784;&#x8FD1;&#xFF0C;&#x5C31;&#x6267;&#x884C;&#x90A3;&#x4E2A;&#x6837;&#x5F0F;&#x3002;</li>
<li>&#x6837;&#x5F0F;&#x4E0D;&#x51B2;&#x7A81;&#xFF0C;&#x4E0D;&#x4F1A;&#x5C42;&#x53E0;</li>
</ul>
</li>
</ul>
<pre><code>CSS&#x5C42;&#x53E0;&#x6027;&#x6700;&#x540E;&#x7684;&#x6267;&#x884C;&#x53E3;&#x8BC0;&#xFF1A;  &#x957F;&#x6C5F;&#x540E;&#x6D6A;&#x63A8;&#x524D;&#x6D6A;&#xFF0C;&#x524D;&#x6D6A;&#x6B7B;&#x5728;&#x6C99;&#x6EE9;&#x4E0A;&#x3002;
</code></pre><h2 id="52-css&#x7EE7;&#x627F;&#x6027;">5.2 CSS&#x7EE7;&#x627F;&#x6027;</h2>
<ul>
<li><p>&#x6982;&#x5FF5;&#xFF1A;</p>
<p>&#x5B50;&#x6807;&#x7B7E;&#x4F1A;&#x7EE7;&#x627F;&#x7236;&#x6807;&#x7B7E;&#x7684;&#x67D0;&#x4E9B;&#x6837;&#x5F0F;&#xFF0C;&#x5982;&#x6587;&#x672C;&#x989C;&#x8272;&#x548C;&#x5B57;&#x53F7;&#x3002;</p>
<p> &#x60F3;&#x8981;&#x8BBE;&#x7F6E;&#x4E00;&#x4E2A;&#x53EF;&#x7EE7;&#x627F;&#x7684;&#x5C5E;&#x6027;&#xFF0C;&#x53EA;&#x9700;&#x5C06;&#x5B83;&#x5E94;&#x7528;&#x4E8E;&#x7236;&#x5143;&#x7D20;&#x5373;&#x53EF;&#x3002;</p>
</li>
</ul>
<p>&#x7B80;&#x5355;&#x7684;&#x7406;&#x89E3;&#x5C31;&#x662F;&#xFF1A;  &#x5B50;&#x627F;&#x7236;&#x4E1A;&#x3002;</p>
<ul>
<li><strong>&#x6CE8;&#x610F;</strong>&#xFF1A;<ul>
<li>&#x6070;&#x5F53;&#x5730;&#x4F7F;&#x7528;&#x7EE7;&#x627F;&#x53EF;&#x4EE5;&#x7B80;&#x5316;&#x4EE3;&#x7801;&#xFF0C;&#x964D;&#x4F4E;CSS&#x6837;&#x5F0F;&#x7684;&#x590D;&#x6742;&#x6027;&#x3002;&#x6BD4;&#x5982;&#x6709;&#x5F88;&#x591A;&#x5B50;&#x7EA7;&#x5B69;&#x5B50;&#x90FD;&#x9700;&#x8981;&#x67D0;&#x4E2A;&#x6837;&#x5F0F;&#xFF0C;&#x53EF;&#x4EE5;&#x7ED9;&#x7236;&#x7EA7;&#x6307;&#x5B9A;&#x4E00;&#x4E2A;&#xFF0C;&#x8FD9;&#x4E9B;&#x5B69;&#x5B50;&#x7EE7;&#x627F;&#x8FC7;&#x6765;&#x5C31;&#x597D;&#x4E86;&#x3002;</li>
<li>&#x5B50;&#x5143;&#x7D20;&#x53EF;&#x4EE5;&#x7EE7;&#x627F;&#x7236;&#x5143;&#x7D20;&#x7684;&#x6837;&#x5F0F;&#xFF08;<strong>text-&#xFF0C;font-&#xFF0C;line-&#x8FD9;&#x4E9B;&#x5143;&#x7D20;&#x5F00;&#x5934;&#x7684;&#x53EF;&#x4EE5;&#x7EE7;&#x627F;&#xFF0C;&#x4EE5;&#x53CA;color&#x5C5E;&#x6027;</strong>&#xFF09;</li>
</ul>
</li>
</ul>
<pre><code>CSS&#x7EE7;&#x627F;&#x6027;&#x53E3;&#x8BC0;&#xFF1A;  &#x9F99;&#x751F;&#x9F99;&#xFF0C;&#x51E4;&#x751F;&#x51E4;&#xFF0C;&#x8001;&#x9F20;&#x751F;&#x7684;&#x5B69;&#x5B50;&#x4F1A;&#x6253;&#x6D1E;&#x3002;
</code></pre><h2 id="53-css&#x4F18;&#x5148;&#x7EA7;&#xFF08;&#x91CD;&#x70B9;&#xFF09;">5.3 CSS&#x4F18;&#x5148;&#x7EA7;&#xFF08;&#x91CD;&#x70B9;&#xFF09;</h2>
<ul>
<li><p>&#x6982;&#x5FF5;&#xFF1A;</p>
<p>&#x5B9A;&#x4E49;CSS&#x6837;&#x5F0F;&#x65F6;&#xFF0C;&#x7ECF;&#x5E38;&#x51FA;&#x73B0;&#x4E24;&#x4E2A;&#x6216;&#x66F4;&#x591A;&#x89C4;&#x5219;&#x5E94;&#x7528;&#x5728;&#x540C;&#x4E00;&#x5143;&#x7D20;&#x4E0A;&#xFF0C;&#x6B64;&#x65F6;&#xFF0C;</p>
<ul>
<li>&#x9009;&#x62E9;&#x5668;&#x76F8;&#x540C;&#xFF0C;&#x5219;&#x6267;&#x884C;&#x5C42;&#x53E0;&#x6027;</li>
<li>&#x9009;&#x62E9;&#x5668;&#x4E0D;&#x540C;&#xFF0C;&#x5C31;&#x4F1A;&#x51FA;&#x73B0;&#x4F18;&#x5148;&#x7EA7;&#x7684;&#x95EE;&#x9898;&#x3002;</li>
</ul>
</li>
</ul>
<h4 id="1-&#x6743;&#x91CD;&#x8BA1;&#x7B97;&#x516C;&#x5F0F;">1). &#x6743;&#x91CD;&#x8BA1;&#x7B97;&#x516C;&#x5F0F;</h4>
<p>&#x5173;&#x4E8E;CSS&#x6743;&#x91CD;&#xFF0C;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x4E00;&#x5957;&#x8BA1;&#x7B97;&#x516C;&#x5F0F;&#x6765;&#x53BB;&#x8BA1;&#x7B97;&#xFF0C;&#x8FD9;&#x4E2A;&#x5C31;&#x662F; CSS Specificity&#xFF08;&#x7279;&#x6B8A;&#x6027;&#xFF09;</p>
<table>
<thead>
<tr>
<th>&#x6807;&#x7B7E;&#x9009;&#x62E9;&#x5668;</th>
<th>&#x8BA1;&#x7B97;&#x6743;&#x91CD;&#x516C;&#x5F0F;</th>
</tr>
</thead>
<tbody>
<tr>
<td>&#x7EE7;&#x627F;&#x6216;&#x8005; *</td>
<td>0,0,0,0</td>
</tr>
<tr>
<td>&#x6BCF;&#x4E2A;&#x5143;&#x7D20;&#xFF08;&#x6807;&#x7B7E;&#x9009;&#x62E9;&#x5668;&#xFF09;</td>
<td>0,0,0,1</td>
</tr>
<tr>
<td>&#x6BCF;&#x4E2A;&#x7C7B;&#xFF0C;&#x4F2A;&#x7C7B;</td>
<td>0,0,1,0</td>
</tr>
<tr>
<td>&#x6BCF;&#x4E2A;ID</td>
<td>0,1,0,0</td>
</tr>
<tr>
<td>&#x6BCF;&#x4E2A;&#x884C;&#x5185;&#x6837;&#x5F0F; style=&quot;&quot;</td>
<td>1,0,0,0</td>
</tr>
<tr>
<td>&#x6BCF;&#x4E2A;!important  &#x91CD;&#x8981;&#x7684;</td>
<td>&#x221E; &#x65E0;&#x7A77;&#x5927;</td>
</tr>
</tbody>
</table>
<ul>
<li>&#x503C;&#x4ECE;&#x5DE6;&#x5230;&#x53F3;&#xFF0C;&#x5DE6;&#x9762;&#x7684;&#x6700;&#x5927;&#xFF0C;&#x4E00;&#x7EA7;&#x5927;&#x4E8E;&#x4E00;&#x7EA7;&#xFF0C;&#x6570;&#x4F4D;&#x4E4B;&#x95F4;&#x6CA1;&#x6709;&#x8FDB;&#x5236;&#xFF0C;&#x7EA7;&#x522B;&#x4E4B;&#x95F4;&#x4E0D;&#x53EF;&#x8D85;&#x8D8A;&#x3002; </li>
<li>&#x5173;&#x4E8E;CSS&#x6743;&#x91CD;&#xFF0C;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x4E00;&#x5957;&#x8BA1;&#x7B97;&#x516C;&#x5F0F;&#x6765;&#x53BB;&#x8BA1;&#x7B97;&#xFF0C;&#x8FD9;&#x4E2A;&#x5C31;&#x662F; CSS Specificity&#xFF08;&#x7279;&#x6B8A;&#x6027;&#xFF09;</li>
<li>div {<pre><code>color: pink!important;  
</code></pre>}</li>
</ul>
<h4 id="2-&#x6743;&#x91CD;&#x53E0;&#x52A0;">2). &#x6743;&#x91CD;&#x53E0;&#x52A0;</h4>
<p>&#x6211;&#x4EEC;&#x7ECF;&#x5E38;&#x7528;&#x4EA4;&#x96C6;&#x9009;&#x62E9;&#x5668;&#xFF0C;&#x540E;&#x4EE3;&#x9009;&#x62E9;&#x5668;&#x7B49;&#xFF0C;&#x662F;&#x6709;&#x591A;&#x4E2A;&#x57FA;&#x7840;&#x9009;&#x62E9;&#x5668;&#x7EC4;&#x5408;&#x800C;&#x6210;&#xFF0C;&#x90A3;&#x4E48;&#x6B64;&#x65F6;&#xFF0C;&#x5C31;&#x4F1A;&#x51FA;&#x73B0;&#x6743;&#x91CD;&#x53E0;&#x52A0;&#x3002;</p>
<p>&#x5C31;&#x662F;&#x4E00;&#x4E2A;&#x7B80;&#x5355;&#x7684;&#x52A0;&#x6CD5;&#x8BA1;&#x7B97;</p>
<ul>
<li>div ul  li   ------&gt;      0,0,0,3</li>
<li>.nav ul li   ------&gt;      0,0,1,2</li>
<li>a:hover      -----&#x2014;&gt;   0,0,1,1</li>
<li><p>.nav a       ------&gt;      0,0,1,1</p>
<p>&#x6CE8;&#x610F;&#xFF1A; </p>
</li>
<li><p>&#x6570;&#x4F4D;&#x4E4B;&#x95F4;&#x6CA1;&#x6709;&#x8FDB;&#x5236; &#x6BD4;&#x5982;&#x8BF4;&#xFF1A; 0,0,0,5 + 0,0,0,5 =0,0,0,10 &#x800C;&#x4E0D;&#x662F; 0,0, 1, 0&#xFF0C; &#x6240;&#x4EE5;&#x4E0D;&#x4F1A;&#x5B58;&#x5728;10&#x4E2A;div&#x80FD;&#x8D76;&#x4E0A;&#x4E00;&#x4E2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;&#x7684;&#x60C5;&#x51B5;&#x3002;</p>
</li>
</ul>
<h4 id="3-&#x7EE7;&#x627F;&#x7684;&#x6743;&#x91CD;&#x662F;0">3). &#x7EE7;&#x627F;&#x7684;&#x6743;&#x91CD;&#x662F;0</h4>
<p>&#x8FD9;&#x4E2A;&#x4E0D;&#x96BE;&#xFF0C;&#x4F46;&#x662F;&#x5FFD;&#x7565;&#x5F88;&#x5BB9;&#x6613;&#x7ED5;&#x6655;&#x3002;&#x5176;&#x5B9E;&#xFF0C;&#x6211;&#x4EEC;&#x4FEE;&#x6539;&#x6837;&#x5F0F;&#xFF0C;&#x4E00;&#x5B9A;&#x8981;&#x770B;&#x8BE5;&#x6807;&#x7B7E;&#x6709;&#x6CA1;&#x6709;&#x88AB;&#x9009;&#x4E2D;&#x3002;</p>
<p>1&#xFF09; &#x5982;&#x679C;&#x9009;&#x4E2D;&#x4E86;&#xFF0C;&#x90A3;&#x4E48;&#x4EE5;&#x4E0A;&#x9762;&#x7684;&#x516C;&#x5F0F;&#x6765;&#x8BA1;&#x6743;&#x91CD;&#x3002;&#x8C01;&#x5927;&#x542C;&#x8C01;&#x7684;&#x3002; 
2&#xFF09; &#x5982;&#x679C;&#x6CA1;&#x6709;&#x9009;&#x4E2D;&#xFF0C;&#x90A3;&#x4E48;&#x6743;&#x91CD;&#x662F;0&#xFF0C;&#x56E0;&#x4E3A;&#x7EE7;&#x627F;&#x7684;&#x6743;&#x91CD;&#x4E3A;0.</p>
<h1 id="6-css&#x6CE8;&#x91CA;">6. CSS&#x6CE8;&#x91CA;</h1>
<p><strong>CSS&#x6CE8;&#x91CA;&#x89C4;&#x5219;&#xFF1A;</strong></p>
<pre><code>/*  &#x9700;&#x8981;&#x6CE8;&#x91CA;&#x7684;&#x5185;&#x5BB9;  */  &#x8FDB;&#x884C;&#x6CE8;&#x91CA;&#x7684;&#xFF0C;&#x5373;&#x5728;&#x9700;&#x8981;&#x6CE8;&#x91CA;&#x7684;&#x5185;&#x5BB9;&#x524D;&#x4F7F;&#x7528; &quot;/*&quot; &#x6807;&#x8BB0;&#x5F00;&#x59CB;&#x6CE8;&#x91CA;&#xFF0C;&#x5728;&#x5185;&#x5BB9;&#x7684;&#x7ED3;&#x5C3E;&#x4F7F;&#x7528; &quot;*/&quot;&#x7ED3;&#x675F;&#x3002;
</code></pre><p>   &#x4F8B;&#x5982;&#xFF1A;</p>
<pre><code class="lang-css"><span class="hljs-selector-tag">p</span> {
 <span class="hljs-comment">/* &#x6240;&#x6709;&#x7684;&#x5B57;&#x4F53;&#x662F;14&#x50CF;&#x7D20;&#x5927;&#x5C0F;*/</span>
  <span class="hljs-attribute">font-size</span>: <span class="hljs-number">14px</span>;                 
}
</code></pre>
<h1 id="7-&#x4ECA;&#x65E5;&#x603B;&#x7ED3;">7. &#x4ECA;&#x65E5;&#x603B;&#x7ED3;</h1>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="../1/3.html" class="navigation navigation-prev " aria-label="Previous page: 4">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="../3/1.html" class="navigation navigation-next " aria-label="Next page: 6">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"typora-copy-images-to":"media","title":"5","level":"1.5","depth":1,"next":{"title":"6","level":"1.6","depth":1,"path":"3/1.md","ref":"3/1.md","articles":[]},"previous":{"title":"4","level":"1.4","depth":1,"path":"1/3.md","ref":"1/3.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"2/1.md","mtime":"2020-11-12T14:06:12.629Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2020-11-12T14:12:15.513Z"},"basePath":"..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

